<template>
    <ContentBase>
        <!-- 图片预览 -->
        <div v-if="imageData" class="image-preview-container">
            <img :src="imageData" alt="Uploaded Image" class="img-fluid rounded shadow-sm" />
            <p style="margin-top: 5px;" v-if="is_success">{{ error_message }}</p>
            <p style="margin-top: 5px; color: red;" v-else>{{ error_message }}</p>
        </div>
        
        <!-- 文件选择输入框 -->
        <input type="file" name="image" @change="handleFileChange" ref="fileInput" style="display: none;" />
        
        <!-- 上传按钮 -->
        <button type="button" class="btn btn-outline-primary btn-lg" 
                @click="triggerFileInput" style="margin-top: 15px;">
            上传发票
        </button>
        <p class="upload-tips">上传图片大小不要超过2M</p>
    </ContentBase>
</template>

<script setup>
import ContentBase from '../components/ContentBase';
import $ from 'jquery';
import { ref } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const imageData = ref(null);
const fileInput = ref(null);
const is_success = ref(null);
const error_message = ref(null);
const triggerFileInput = () => {
    fileInput.value.click();  // 触发文件选择框的点击事件
};

function handleFileChange(event) {
    const file = event.target.files[0];

    if (file) {
        const maxSize = 2 * 1024 * 1024;  // 2MB
        // 判断文件大小
        if (file.size > maxSize) {
            error_message.value = '文件大小不能超过 2MB';
            imageData.value = URL.createObjectURL(file);  // 显示图片预览
            event.preventDefault();  // 阻止表单提交
            return;
        }
        imageData.value = URL.createObjectURL(file);  // 显示图片预览
        uploadFile(file);  // 上传文件
    }
}

function uploadFile(file) {
    const formData = new FormData();
    formData.append('image', file); // 将文件添加到 FormData 对象
    error_message.value = "";

    // 使用 jQuery 的 $.ajax 发送文件到 Spring Boot 后端
    $.ajax({
        url: 'http://localhost:3000/api/invoice/info/file',   // Spring Boot 后端接口地址
        type: 'POST',
        headers: {      // jwt验证写法
            'Authorization': "Bearer " + store.state.user.token,
        },
        data: formData,  // 发送 FormData 数据
        processData: false,  // 防止 jQuery 默认处理 data（因为我们发送的是 FormData）
        contentType: false,  // 防止 jQuery 默认设置 Content-Type（浏览器会自动处理）
        success(resp) {
            if (resp.error_message == "上传成功！") {
                is_success.value = true;
            } else {
                is_success.value = false;
            }
            error_message.value = resp.error_message;
        },
    });
}

</script>

<style scoped>

/* 图片预览容器 */
.image-preview-container {
    display: flex;
    flex-direction: column;  /* 使图片和文本上下排列 */
    justify-content: center;
    align-items: center;  /* 水平居中对齐 */
    width: 100%;
    height: 50vh;
}

.image-preview-container img {
    height: 90%;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


.upload-tips {
    margin-top: 5px;
    font-size: 14px;
    color: red;
}

</style>
